<template>
  <el-dialog
    custom-class="add-dialog"
    :visible.sync="dialogTableVisible"
    :title="titleMsg"
    :close-on-click-modal="false"
  >
    <el-form
      ref="form"
      :rules="rules"
      :model="formData"
      label-width="110px"
      class="box_acct_form"
    >
      <el-row :gutter="24">
        <el-form-item label="开始时间:" prop="startdate">
          <el-date-picker
            size="medium"
            v-model="formData.startdate"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd+HH:mm:ss"
            format="yyyy-MM-dd"
            :disabled="isNotEdit"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
      </el-row>
      <el-row :gutter="24">
        <el-form-item label="结束时间:" prop="enddate">
          <el-date-picker
            size="medium"
            v-model="formData.enddate"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd+HH:mm:ss"
            format="yyyy-MM-dd"
            :disabled="isNotEdit"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
      </el-row>
      <el-row :gutter="24">
        <el-form-item label="应缴金额:" prop="orderpay">
          <el-input
            size="medium"
            v-model="formData.orderpay"
            :disabled="isNotEdit"
          ></el-input>
        </el-form-item>
      </el-row>
      <el-row :gutter="24">
        <el-form-item label="缴费状态:" prop="orderstatus">
          <el-select
            size="small"
            clearable
            v-model="formData.orderstatus"
            :disabled="isNotEdit"
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row :gutter="24">
        <el-form-item label="通知缴费:" prop="note">
          <el-input
            size="medium"
            v-model="formData.note"
            :disabled="isNotEdit"
          ></el-input>
        </el-form-item>
      </el-row>
      <!--            <el-row :gutter="24">-->
      <!--                <el-col :span="12">-->
      <!--                    <el-form-item label="是否启用">-->
      <!--                        <el-checkbox v-model="checked"></el-checkbox>-->
      <!--                    </el-form-item>-->
      <!--                </el-col>-->
      <!--            </el-row>-->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button
        v-if="!isNotEdit"
        type="primary"
        class="full-width"
        @click="close"
        >取消</el-button
      >
      <el-button
        v-if="this.actionType == 'edit'"
        type="primary"
        class="full-width"
        @click="save"
        >保存</el-button
      >
      <el-button
        v-if="!isNotEdit"
        type="primary"
        class="full-width"
        @click="reset"
        >重置</el-button
      >
      <el-button
        v-else
        type="primary"
        class="full-width"
        @click="dialogTableVisible = false"
        >关闭</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "addDialog",
  data() {
    return {
      actionType: "",
      // typeInfo: '',
      dialogTableVisible: false,
      loading: false,
      formData: {
        startdate: "",
        enddate: "",
        note: "",
        orderpay: "",
        orderstatus: "",
      },
      typeList: [
        {
          text: "已缴费",
          value: "1",
        },
        {
          text: "未缴费",
          value: "2",
        },
      ],
      // 校验规则
      rules: {
        startdate: [
          { required: true, message: "开始时间不能为空", trigger: "blur" },
        ],
        enddate: [
          { required: true, message: "结束时间不能为空", trigger: "blur" },
        ],
        orderpay: [
          { required: true, message: "缴费金额不能为空", trigger: "blur" },
        ],
        orderstatus: [
          { required: true, message: "缴费状态不能为空", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {},
  computed: {
    titleMsg() {
      if (this.actionType == "edit") {
        return "用户信息编辑";
      } else if (this.actionType == "detail") {
        return "用户信息查看";
      } else if (this.actionType == "add") {
        return "新增用户";
      }
    },
    isNotEdit() {
      if (this.actionType == "detail") {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    // 获取父组件传的行数据
    init(row) {
        this.formData = {
        ...row,
        orderstatus: row.orderstatus.toString() // 确保转换为字符串类型
      };
    },
    // 取消
    close() {
      this.dialogTableVisible = false;
    },
    // 编辑保存
    save() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          this.$message.error({
            message: "必填项不能为空",
            duration: 2000,
          });
        } else {
          this.$axiosToken({
            url: "/parking/editParkOrder",
            method: "post",
            data: {
              u_id: this.formData.id,
              startdate: this.formData.startdate.replace("T", "+ ").replace(".000Z", ""),
              enddate: this.formData.enddate.replace("T", "+ ").replace(".000Z", ""),
              note: this.formData.note,
              orderpay: this.formData.orderpay,
              orderstatus: this.formData.orderstatus,
            },
            success: (result) => {
              this.$parent.getData();
              this.$message({
                showClose: true,
                message: "用户修改成功",
                type: "success",
              });
              console.log("-----",result);
              
            },
          });
          this.dialogTableVisible = false;
        }
      });
    },

    // 重置
    reset() {
      this.formData = {
        startdate: "",
        enddate: "",
        note: "",
        orderpay: "",
        orderstatus: "",
      };
    },
  },
};
</script>

<style scoped>
::v-deep.el-dialog__title {
  line-height: 24px;
  font-size: 20px;
  color: #303133;
  font-weight: bolder;
}
.box_acct_form .el-row .el-col .el-form-item .el-form-item__content .el-input {
  width: 100%;
}
.box_acct_form .el-row .el-col .el-form-item .el-form-item__content .el-select {
  width: 100%;
}
textarea
  .box_acct_form
  .el-row
  .el-col
  .el-form-item
  .el-form-item__content
  .el-textarea {
  width: 100%;
}

.box_acct_form .el-row {
  margin-bottom: 0px;
}
::v-deep .add-dialog {
  width: 900px;
  margin: auto;
  overflow: auto;
}
.msg_form {
  margin: 7px 15px;
}

.msg_form .msg_title {
  clear: both;
  display: block;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  margin: 0 0 14px;
  position: relative;
  font-weight: bold;
  color: #327501;
  color: #20a0ff;
  font-size: 16px;
}

::v-deep .msg_form .msg_title .msg_title_tips {
  color: #797979;
  font-weight: normal;
  font-size: 12px;
}

.msg_box {
  position: relative;
  width: 100%;
}

.btn_div {
  text-align: center;
}
.btn_div button {
  height: 32px;
  width: 107px;
}

.box_content {
  background: #f9f9f9;
  border: 1px solid #d1d1d1;
  padding: 15px;
  margin: 0px 10px;
  position: relative;
}
.el-button {
  width: 60px;
  height: 36px;
  font-size: 14px;
}
</style>
